<template>
  <div class="c-p">
    <div class="c-ph24 ">
      <div class="c-flex-column" v-for="(item,index) in commentList" :key="index">
        <div class="c-flex-row c-aligni-center c-justify-sb c-pt30 c-pb12">
          <div class="c-flex-row c-aligni-center">
            <img v-lazy="item.headimgurl || require('@/assets/defult_head.png')" :key="item.headimgurl" class="c-ww56 c-hh56 c-brp50 c-block" alt=""/>
            <div class="c-fs24 c-fc-xblack c-ml14 c-maxw200">{{item.nickname != null && item.nickname != '' ? item.nickname : '未知用户'}}</div>
            <identity-com class="c-ml8" v-if="!$isWxAppIos()&&(item.vipType==2||item.vipType==4)" :vipType="item.vipType"></identity-com>
          </div>
          <div class="c-fs20 c-flex-row c-aligni-center">
            <div class="c-fc-gray">{{item.createdAt}}</div>
          </div>
        </div>
        <div class="c-flex-row c-aligni-center">
          <div v-for="index in 5" :key="index" class="c-ww20 c-hh20 c-mr6" :class="
            index <= item.level
              ? 'star_s'
              : 'star_d'">
          </div>
          <div class="c-pl6 c-fs20 c-fc-sorange">{{item.levelName}}</div>
        </div>
        <div class="c-flex-column c-flex-grow1 c-justify-sb c-mt18 c-pb" :class="index == (commentList.length -1) ? '' : 'c-bd-b1'">
          <div class="c-fs24 c-fc-xblack" :class="item.reply && item.reply.length > 0?'':'c-pb28'">
            {{item.content}}
          </div>
          <div class="c-ph24 c-pv24 c-mt16 c-bg-sgray c-br4" v-if="item.reply && item.reply.length > 0">
            <live-reply-comment :reply="reItem" v-for="(reItem,reIndex) in item.reply" :key="reIndex" :commenIndex="index" :replyIndex="reIndex"></live-reply-comment>
          </div>
        </div>
      </div>
      <loading-status-tem :dataStatus="dataStatus" noDataText="暂无评价" noDataStyle="padding: 0px" :class="dataStatus == 'NO_DATA' ? 'c-bg-white c-hh640 c-flex-column c-flex-center' : ''"></loading-status-tem>
    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import identityCom from "@/components/templates/common/identityCom.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import liveReplyComment from "@/components/templates/live/liveReplyComment.vue";
let page = 1
let LIMIT = 10
export default {
  name: 'Comment',
  components: {
    identityCom,
    loadingStatusTem,
    liveReplyComment
  },
  props: {
    prodId:{
      type: Number,
      default: 0
    },
    prodType:{
      type: Number,
      default: 0
    },
  },
  beforeCreate() {

  },
  data() {
    return {
      commentList: [],
      dataStatus : 'HAS_MORE_DATA'
    }
  },
  created() {
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    // this.dataStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  },
  mounted() {
  },
  computed: {

  },
  watch: {
  },
  methods: {
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.commentList.length > 0) {
          this.getLiveList();
        }
      });
    },
    inintList() {
      page = 1
      this.getLiveList()
    },
    // 获取评论列表
    getLiveList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(global.apiurl + "comment/list?prodId=" + this.prodId + "&prodType=" + this.prodType + '&page=' + page + '&limit=' + LIMIT, res => {
          if (page == 1) {
            this.commentList = res.data;
          } else {
            this.commentList = [...this.commentList, ...res.data];
          }
          if (res.data && (res.data.length < LIMIT)) {
            this.dataStatus = page == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.dataStatus = 'HAS_MORE_DATA';
            page++;
          }
          this.$emit('updateCommentCount', res.total)
        },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wrap {
  white-space: normal;
  word-break: break-all;
}
.star_s{
    background: url("../../../assets/i/wap/live/comment.png");
    background-position-x: -0.48rem;
    background-position-y: 0;
    background-size: auto 100%;
}
.star_d{
  background: url("../../../assets/i/wap/live/comment.png");
  background-position-x: 0;
  background-position-y: 0;
  background-size: auto 100%;
}
</style>
